<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <h:head>
        <f:facet name="first">
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <title>SYSCVSA</title>
        </f:facet>

        <h:outputStylesheet library="css" name="bootstrap.min.css"/>
        <h:outputStylesheet library="css" name="bootstrap-responsive.min.css"/>
        <h:outputStylesheet library="css" name="myapp.css"/>
        <!--h:outputStylesheet library="css" name="default.css"/-->

        <h:outputScript library="js" name="modernizr.custom.05531.js"/>
        <h:outputScript library="primefaces" name="jquery/jquery.js" />
        <h:outputScript library="js" name="jquery.easing.1.3.js"/>
        <h:outputScript library="js" name="jquery.jBreadCrumb.1.1.js"/>
        <h:outputScript library="js" name="jquery.protect-data.pack.js"/>


        <script type="text/javascript">
            function scrollToBottom() {
                var $ = jQuery;
                //$('#scrollpanel').scrollTop($('#scrollpanel')[0].scrollHeight);
                $("#scrollpanel").animate({scrollTop: $('#scrollpanel')[0].scrollHeight}, 3000);
            }
        </script>

        <style type="text/css">
            li {list-style-type: none;}
            .menuLabel{
                padding-left: 0px;
                margin-left: 0px;
                color: #444;
            }
            .raised{
                -webkit-box-shadow: 1px 7px 8px 0px rgba(50, 50, 50, 0.52);
                -moz-box-shadow:    1px 7px 8px 0px rgba(50, 50, 50, 0.52);
                box-shadow:         1px 7px 8px 0px rgba(50, 50, 50, 0.52);
            }

            ol.progtrckr {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            ol.progtrckr li {
                display: inline-block;
                text-align: center;
                line-height: 3em;
                font-size: 10pt;
            }

            ol.progtrckr[data-progtrckr-steps="2"] li { width: 35%; }
            ol.progtrckr[data-progtrckr-steps="3"] li { width: 28%; }
            ol.progtrckr[data-progtrckr-steps="4"] li { width: 19%; }
            ol.progtrckr[data-progtrckr-steps="5"] li { width: 16%; }
            ol.progtrckr[data-progtrckr-steps="6"] li { width: 12%; }
            ol.progtrckr[data-progtrckr-steps="7"] li { width: 10%; }
            ol.progtrckr[data-progtrckr-steps="8"] li { width: 9%; }
            ol.progtrckr[data-progtrckr-steps="9"] li { width: 8%; }
            ol.progtrckr li.progtrckr-done {
                color: black;
                border-bottom: 4px solid yellowgreen;
            }
            ol.progtrckr li.progtrckr-todo {
                color: silver; 
                border-bottom: 4px solid silver;
            }
            ol.progtrckr li:after {
                content: "\00a0\00a0";
            }
            ol.progtrckr li:before {
                position: relative;
                bottom: -2.5em;
                float: left;
                left: 50%;
                line-height: 1em;
            }
            ol.progtrckr li.progtrckr-done:before {
                content: "\2713";
                color: white;
                background-color: yellowgreen;
                height: 1.2em;
                width: 1.2em;
                line-height: 1.2em;
                border: none;
                border-radius: 1.2em;
            }
            ol.progtrckr li.progtrckr-todo:before {
                content: "\039F";
                color: silver;
                background-color: white;
                font-size: 1.5em;
                bottom: -1.6em;
            } 


            .ui-datagrid-content{
                border: none!important;
                background: transparent!important;

            }


            .ui-layout-pane-center
            {

            }


            .botonesTeclado{
                width: 50px; height: 45px;
            }

            .botonesTecladoOperacion{
                width: 103px; height: 45px;
            }
            
            .fondoAzul{
                background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */

            }
            
            .fondoNegro{
                background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

            }
        </style>
    </h:head>

    <h:body style="padding: 0px;margin: 0px;" >

        <h:form>
            <p:layout fullPage="true">
                <p:layoutUnit position="north" size="50" style="padding: 0; margin: 0px;border: none;">
                    <p:panel styleClass="panelIzquierdo fondoNegro" style="padding: 0; margin: 0px;height: 100%;border: none">
                        
                    </p:panel>
                </p:layoutUnit>
                <p:layoutUnit position="east" size="410" style="padding: 0; margin: 0px;border: none;">
                    <h:panelGroup style="padding: 0; margin: 0px; background-color: ">
                        <ui:include src="detallesTicket.xhtml"/>
                        <br/>  
                        <ui:include src="teclado.xhtml"/>
                    </h:panelGroup>    
                </p:layoutUnit>

                <p:layoutUnit position="center" style="padding: 0; margin: 0px;border: none;">
                    <p:panel styleClass="panelIzquierdo fondoAzul" style="padding: 0; margin: 0px;height: 100%;border: none">
                        <ui:include src="#{terminalBean.panelActual}"/>
                    </p:panel>
                </p:layoutUnit>
            </p:layout>
        </h:form>
    </h:body>

</html>
